<template>
  <div class="w-full shadow-md mx-auto">
      <div class="px-4 flex items-center justify-between h-16 bg-yellow-300">
        <!-- Logo/Brand -->
        <div class="flex items-center">
          <a :href="Home" class="flex items-center">
            <img
              src="@/assets/image/logo.jpg"
              class="rounded-full w-12 h-12 object-cover"
              alt="希洛之书"
            />
            <span class="ml-2 text-xl font-semibold">希洛之书</span>
          </a>
        </div>

        <!-- Mobile menu button -->
        <div class="flex md:hidden">
          <button
            @click="isOpen = !isOpen"
            class="text-gray-700 hover:text-gray-900 focus:outline-none"
          >
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
            </svg>
          </button>
        </div>

        <!-- Desktop Nav -->
        <div class="hidden md:flex items-center space-x-8">
          <div class="flex space-x-4">
            <a v-for="(item, index) in navList" :key="index" :href="item.link"
               class="px-3 py-2 rounded-md text-sm font-medium hover:bg-yellow-400 transition-colors">
              {{ item.name }}
            </a>
          </div>

          <div class="flex">
            <input placeholder="搜索" type="search"
              class="px-4 py-2 rounded-l-md border focus:outline-none focus:ring-1 focus:ring-yellow-500"
            >
            <button
              type="submit"
              class="px-4 py-2 bg-green-500 text-white rounded-r-md hover:bg-green-600 transition-colors"
            >
              搜索
            </button>
          </div>
        </div>
      </div>

      <!-- Mobile Nav -->
      <div v-show="isOpen" class="md:hidden pb-4 bg-yellow-100">
        <div class="flex flex-col space-y-2">
          <a
            v-for="(item, index) in navList"
            :key="index"
            :href="item.link"
            class="px-3 py-2 rounded-md text-sm font-medium hover:bg-yellow-400"
          >
            {{ item.name }}
          </a>
        </div>
        <div class="mt-4 flex">
          <input
            type="search"
            placeholder="搜索"
            class="flex-1 px-4 py-2 rounded-l-md border focus:outline-none focus:ring-1 focus:ring-yellow-500"
          >
          <button
            type="submit"
            class="px-4 py-2 bg-green-500 text-white rounded-r-md hover:bg-green-600"
          >
            搜索
          </button>
        </div>
      </div>
    </div>
</template>

<script>
import {AboutPage, Home, ParadiseLost, TianWen, WorldTreePage} from "@/index";

export default {
  name: "HeaderCmp",
  data() {
    return {
      isOpen: false,
      navList: [
        { name: '首页', link: Home, children: [] },
        { name: '天问', link: TianWen, children: [] },
        { name: '失乐园', link: ParadiseLost, children: [] },
        { name: '世界之树', link: WorldTreePage, children: [] },
        { name: '关于', link: AboutPage, children: [] },
      ],
      Home
    }
  }
}
</script>

<style scoped>
/* Custom styles if needed */
</style>